import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

/**
 * pinia 插件
 *    执行时机：
 *        当项目使用了某个 store 时，才会触发该函数
 *        pinia 是有多个 store 的，每一个 store 第一次 使用时会执行该函数。
 *    接受一个 context 参数
 *        app: 当前应用实例，createApp 创建出来的 app
 *        options:  当前应用该插件的 store 的配置内容
 *        pinia:  当前 pinia 实例，createPinia 创建出来的东西
 *        store:  当前应用该插件的 store 实例对象
 */
// function SecretPiniaPlugin(context) {
//   console.log('SecretPiniaPlugin', context)
//   return { secret: 'the cake is a lie' }
// }

/**
 * 实现一个数据持久化的 pinia 插件
 *    1. 使用 store.$subscribe() 来监听的数据的变化，将变化的数据写入到 本地存储中
 *    2. 在插件函数一开始就将 本地存储的数据获取并设置回去
 *
 *    数据格式的格式：
 *
 *      1. 一整个存储
 *        store: {
 *           app: {},
 *           user: {}
 *        }
 *      2. 按照 store 的个数来存储
 *        app: {}
 *        user: {}
 */
function plugin({ store }) {
  const key = store.$id
  console.log('store 对象', store)

  // 取
  const json = localStorage.getItem(key)
  if (json) {
    // 不为空，就要设置到仓库中去
    store.$patch(JSON.parse(json))
  }

  store.$subscribe((mutation, state) => {
    const value = JSON.stringify(state)
    // 直接存
    localStorage.setItem(key, value)
  })
}

const app = createApp(App)
const pinia = createPinia()

// 使用 pinia.use 注册 pinia 插件
// pinia.use(SecretPiniaPlugin)
pinia.use(plugin)

app.use(pinia)
app.mount('#app')
